<template>
 <div class="editIntegral_container">
    <div class="nav">
      <Breadcrumb separator=">">
        <Breadcrumb-item href="#">忠诚度管理</Breadcrumb-item>
        <Breadcrumb-item href="#">编辑积分获取规则</Breadcrumb-item>
      </Breadcrumb>
    </div>
    <Row type="flex" justify="end">
        <Col>
            <Button type="primary" @click="modal1=true">新增规则</Button>
        </Col>
    </Row>
    <Row style="margin-top:2vh;">
        <Col>
          <Table :loading="TableLoading" border :columns="columns7" :data="data6"></Table>
          <Row type="flex" justify="center" align="middle" style="margin-top:2vh;">
            <Col>
              <Page :id="interact" show-total :total="total" :page-size="pageSize" @on-change="pageable" @on-page-size-change="changegroupPageSize" show-sizer show-elevator></Page>
            </Col>
            <Col push="1">
              <Button style="margin-top: 1vh;" type="primary" @click="goElevatorPage(interact)">跳转</Button>
            </Col>
          </Row>
        </Col>
    </Row>
    <!-- 新增积分规则 -->
    <Modal  v-model="modal1" 
            title="新增积分获取规则"
            width="780">
        <Form :model="formItem" :label-width="80" ref="formItem" label-position="left">
            <FormItem label="互动编号：" prop="interacttype" :label-width="90"  style="margin-top:2vh;">
                <Input v-model="formItem.code" placeholder="请输入规则编号" :maxlength=50 clearable></Input>
            </FormItem>
            <FormItem label="规则名称："  prop="rulename" :label-width="90" style="margin-top:3vh;">
                <Input v-model="formItem.name" type="text" width="200"  placeholder="请输入规则名称" :maxlength=10 clearable></Input>
            </FormItem>
            <FormItem label="规则描述：" prop="ruledesc" :label-width="90" style="margin-top:3vh;">
                 <Input v-model="formItem.limitDescription" type="textarea" :rows="4" placeholder="请输入规则描述..." clearable/>
            </FormItem>
            <FormItem label="获取积分：" prop="getintegral" :label-width="90" style="margin-top:3vh;">
               <Input v-model="formItem.points" type="text" width="200"  placeholder="请输入获取积分数量" :maxlength=10 clearable></Input>
            </FormItem>
            <FormItem label="适用渠道：" prop="channel" :label-width="90" style="margin-top:3vh;">
                <Select v-model="formItem.channelId" placeholder="请选择渠道"  clearable>
                    <Option  v-for="(item,index) in channellist" :key="index" :label="item.name" :value="item.id">{{item.name}}</Option>
                </Select>
            </FormItem>
            <FormItem label="积分类型：" prop="pointsType" :label-width="90" style="margin-top:3vh;">
              <Select v-model="formItem.pointsTypeId" placeholder="请选择积分类型"  clearable>
                <Option  v-for="(item,index) in pointsTypeList" :key="index" :label="item.name" :value="item.id">{{item.name}}</Option>
              </Select>
            </FormItem>
            <FormItem label="开始日期：" :label-width="90" style="margin-top:3vh;" prop="beginDate">
                <DatePicker type="datetime" placeholder="请选择开始日期" v-model="formItem.beginDate" format="yyyy-MM-dd" @on-change="formItem.beginDate=$event" style="width:100%;" clearable></DatePicker>
            </FormItem>
            <FormItem label="结束日期：" :label-width="90" style="margin-top:3vh;" prop="endDate">
                 <DatePicker type="datetime" placeholder="请选择结束日期" v-model="formItem.endDate" format="yyyy-MM-dd" @on-change="formItem.endDate=$event" style="width:100%;" clearable></DatePicker>
            </FormItem>
            <FormItem label="" :label-width="90" style="margin-top:2vh;" prop="circle">
                    <Checkbox @on-change="disabled1 =! disabled1">同1个活动每用户允许重复参与,每</Checkbox>
                    <Select v-model="formItem.limitPeriodType" placeholder="请选择" clearable style="width:100px;" :disabled="disabled1">
                        <Option v-for="item in circlelist" :key="item.value" :value="item.value" :label="item.label"></Option>
                    </Select>
                    <span>限</span>
                    <Input v-model="formItem.uplimitTimes" type="text" style="width:50px" placeholder="请输入" clearable :disabled="disabled1"></Input>
                    <span>次</span>
            </FormItem>
            <FormItem label="" :label-width="90" style="margin-top:2vh;" prop="userintegral">
                    <Checkbox @on-change="disabled2 =! disabled2">同1个活动每用户限</Checkbox>
                    <Input v-model="formItem.uplimitPoints" type="text" style="width:50px" placeholder="请输入" clearable :disabled="disabled2"></Input>
                    <span>积分</span>
            </FormItem>
        </Form>
        <div slot="footer">
            <Button type="text" size="large" @click="modal1=false">取消</Button>
            <Button type="primary" size="large" @click="Addintegralrule('formItem')">确定</Button>
        </div>
    </Modal>
    
    <!-- 查看积分获取规则 -->
    <Modal  v-model="modal2" title="查看积分获取规则" width="780">
        <Form :model="ruledetail" :label-width="80" ref="ruledetail" label-position="left" v-if="ruledetail">
            <FormItem label="规则编码:" prop="interacttype" :label-width="90"  style="margin-top:2vh;">
                <Input v-model="ruledetail.code" placeholder="请输入规则编号" readonly></Input>
            </FormItem>
            <FormItem label="互动类型：" :label-width="90"  style="margin-top:2vh;">
                <Input v-model="ruledetail.behaviour_type_id" placeholder="请输入规则编号" readonly :maxlength=10></Input>
            </FormItem>
            <FormItem label="规则名称：" :label-width="90" style="margin-top:3vh;">
                <Input v-model="ruledetail.name" type="text" width="200" readonly placeholder="请输入规则名称" :maxlength=10></Input>
            </FormItem>
            <FormItem label="规则描述：" :label-width="90" style="margin-top:3vh;">
                <Input v-model="ruledetail.behaviour_type_name" type="textarea" :rows="4" readonly placeholder="请输入规则描述..."/>
            </FormItem>
            <FormItem label="获取积分：" :label-width="90" style="margin-top:3vh;">
               <Input v-model="ruledetail.points" type="text" width="200" readonly placeholder="请输入获取积分数量" :maxlength=10></Input>
            </FormItem>
            <FormItem label="适用渠道：" :label-width="90" style="margin-top:3vh;">
                <Select v-model="ruledetail.channelId" placeholder="请选择渠道"  disabled>
                    <Option :value="ruledetail.channelId"  v-for="(item,index) in channellist" :key="index">{{item.name}}</Option>
                </Select>
            </FormItem>
            <FormItem label="开始日期：" :label-width="90" style="margin-top:3vh;">
                <DatePicker type="datetime" placeholder="请选择开始日期" readonly v-model="ruledetail.begin_date" format="yyyy-MM-dd" @on-change="ruledetail.scheduleExecTime=$event" style="width:100%;"></DatePicker>
            </FormItem>
            <FormItem label="结束日期：" :label-width="90" style="margin-top:3vh;">
                 <DatePicker type="datetime" placeholder="请选择结束日期" readonly v-model="ruledetail.end_date" format="yyyy-MM-dd" @on-change="ruledetail.scheduleExecTime=$event" style="width:100%;"></DatePicker>
            </FormItem>
            <FormItem label="" :label-width="90" style="margin-top:2vh;">
                    <span>同1个活动每用户允许重复参与,每</span>
                    <Select v-model="ruledetail.limitPeriodType" placeholder="请选择" style="width:100px;" :disabled="disabled1" readonly>
                        <Option :value="ruledetail.limitPeriodType" v-for="(item,index) in circlelist" :key="index">{{item.label}}</Option>
                    </Select>
                    <span>限</span>
                    <Input v-model="ruledetail.uplimit_times" type="text" style="width:50px" placeholder="请输入" readonly :disabled="disabled1"></Input>
                    <span>次</span>
            </FormItem>
            <FormItem label="" :label-width="90" style="margin-top:2vh;">
                    <span>同1个活动每用户限</span>
                    <Input v-model="ruledetail.uplimit_points" type="text" style="width:50px" placeholder="请输入" readonly :disabled="disabled2"></Input>
                    <span>积分</span>
            </FormItem>
        </Form>
        <div slot="footer">
            <Button type="text" size="large" @click="modal2=false">取消</Button>
            <Button type="primary" size="large" @click="showintegralrule">确定</Button>
        </div>
    </Modal>

    <!-- 修改积分获取规则 -->
    <Modal  v-model="modal3" title="修改积分获取规则" width="780">
        <Form :model="ruledetail" :label-width="80" ref="ruledetail" label-position="left">
            <FormItem label="规则编码:" prop="interacttype" :label-width="90"  style="margin-top:2vh;">
                <Input v-model="ruledetail.code" placeholder="请输入规则编号" readonly></Input>
            </FormItem>
            <FormItem label="互动类型：" prop="interacttype" :label-width="90"  style="margin-top:2vh;">
                <Input v-model="ruledetail.behaviour_type_id" placeholder="请输入规则编号" readonly></Input>
            </FormItem>
            <FormItem label="规则名称："  prop="rulename" :label-width="90" style="margin-top:3vh;">
                <Input v-model="ruledetail.name" type="text" width="200" placeholder="请输入规则名称" :maxlength=10 clearable></Input>
            </FormItem>
            <FormItem label="规则描述：" prop="limitDescription" :label-width="90" style="margin-top:3vh;">
                 <Input v-model="ruledetail.limitDescription" type="textarea" :rows="4" placeholder="请输入规则描述..." clearable/>
            </FormItem>
            <FormItem label="获取积分：" prop="getintegral" :label-width="90" style="margin-top:3vh;">
               <Input v-model="ruledetail.points" type="text" width="200" placeholder="请输入获取积分数量" :maxlength=10 clearable></Input>
            </FormItem>
            <FormItem label="适用渠道：" prop="channelId" :label-width="90" style="margin-top:3vh;">
                <Select v-model="ruledetail.channelId" placeholder="请选择渠道"  clearable>
                    <Option :value="item.id" v-for="(item,index) in channellist" :key="index">{{item.name}}</Option>
                </Select>
            </FormItem>
            <FormItem label="开始日期：" :label-width="90" style="margin-top:3vh;" prop="beginDate">
                <DatePicker type="datetime" placeholder="请选择开始日期" v-model="ruledetail.beginDate" format="yyyy-MM-dd" @on-change="ruledetail.beginDate=$event" style="width:100%;" clearable></DatePicker>
            </FormItem>
            <FormItem label="结束日期：" :label-width="90" style="margin-top:3vh;" prop="endDate">
                <DatePicker type="datetime" placeholder="请选择结束日期" v-model="ruledetail.endDate" format="yyyy-MM-dd" @on-change="ruledetail.endDate=$event" style="width:100%;" clearable></DatePicker>
            </FormItem>
            <FormItem label="" :label-width="90" style="margin-top:2vh;" prop="circle">
                <Checkbox @on-change="disabled1 =! disabled1">同1个活动每用户允许重复参与,每</Checkbox>
                <Select v-model="ruledetail.limitPeriodType" placeholder="请选择" style="width:100px;" :disabled="disabled1">
                    <Option :value="ruledetail.limitPeriodType" v-for="(item,index) in circlelist" :label="item.label" :key="index">{{item.label}}</Option>
                </Select>
                <span>限</span>
                <Input v-model="ruledetail.uplimitPoints" type="text" style="width:50px" placeholder="请输入" clearable :disabled="disabled1"></Input>
                <span>次</span>
            </FormItem>
            <FormItem label="" :label-width="90" style="margin-top:2vh;" prop="userintegral">
                <Checkbox @on-change="disabled2 =! disabled2">同1个活动每用户限</Checkbox>
                <Input v-model="ruledetail.uplimitPoints" type="text" style="width:50px" placeholder="请输入" clearable :disabled="disabled2"></Input>
                <span>积分</span>
            </FormItem>
        </Form>
        <div slot="footer">
            <Button type="text" size="large" @click="modal3=false">取消</Button>
            <Button type="primary" size="large" @click="Editintegralrule('ruledetail')">确定</Button>
        </div>
    </Modal>
 </div>
</template>
<script>
import { fetintegralrule,addintegralrule,editintegralrule,delintegralrule, pointsRuleBehaviourPage, pointsTypeList} from '@/api/Integral';
import { fetchChannelList } from '@/api/customer';
export default {
  name:'EditIntegral',
  data () {
    return {
        interact:'interact',
        modal1:false,
        modal2:false,
        modal3:false,
        disabled1:true,
        disabled2:true,
        TableLoading: false,
        interacttype:this.$route.params,
        listdata:[],
        pointsTypeList: [],
        columns7: [
            {
                title: '编号',
                key: 'code',
                align: 'center',
            },
            {
                title: '互动类型',
                key: 'behaviour_type_name',
                align: 'center',
            },
            {
                title: '规则名称',
                key: 'name',
                align: 'center',
            },
            {
                title: '渠道',
                key: 'channel_id',
                align: 'center',
            },
            {
                title: '规则时间-开始时间',
                key: ' begin_date',
                align: 'center',
                width:150,
                render: (h, params) => {
                    return h('div', this.changeDate(this.data6[params.index].begin_date));
                }
            },
            {
              title: '规则时间-结束时间',
              key: 'end_date',
              align: 'center',
              width:150,
              render: (h, params) => {
                    return h('div', this.changeDate(this.data6[params.index].end_date));
                }
            },
          //'积分获取上限 0-不限制 >0-限制积分数'
            {
                title: '限制',
                key: 'uplimit_times',
                align: 'center',
                tooltip: "true"
            },
            {
                title: '操作',
                key: 'action',
                width: 220,
                align: 'center',
                render: (h, params) => {
                    return h('div', [
                        h('Button', {
                            props: {
                                type: 'success',
                                size: 'small'
                            },
                            style: {
                                marginRight: '5px'
                            },
                            on: {
                                click: () => {
                                    this.showrule(params.index)
                                }
                            }
                        }, '查看'),
                        h('Button', {
                            props: {
                                type: 'warning',
                                size: 'small'
                            },
                            style: {
                                marginRight: '5px'
                            },
                            on: {
                                click: () => {
                                    this.editrule(params.index)
                                }
                            }
                        }, '修改规则'),
                        h('Button', {
                            props: {
                                type: 'error',
                                size: 'small'
                            },
                            style: {
                                marginRight: '5px'
                            },
                            on: {
                                click: () => {
                                    this.remove(params.row)
                                }
                            }
                        }, '删除')
                    ]);
                }
            }
        ],
        data6: [],
        formItem:{
            code:'',
            behaviourTypeId:this.$route.params.interacttype,
            id:'',
            name:'',
            limitDescription:'',
            points:'',
            channelId:'',
            beginDate:'',
            endDate:'',
            limitPeriodType:'',
            uplimitTimes:'',
            uplimitPoints:'',
        },
        circlelist:[
            {
                label:'日',
                value:'1'
            },
            {
                label:'周',
                value:'2'
            },
            {
                label:'月',
                value:'3'
            },
            {
                label:'年',
                value:'4'
            },
            {
                label:'不限周期',
                value:'0'
            },
        ],
        ruledetail:{
            name:'',
            limitDescription:'',
            points:'',
            channelId:'',
            beginDate:'',
            endDate:'',
            limitPeriodType:'',
            uplimitTimes:'',
            uplimitPoints:'',
        },
        channellist:[],

        pageNum: 1,
        pageSize: 10,
        total: 0
    }
  },
  methods: {
    pageable(current) {
      this.pageNum = current;
      this.pointsRuleBehaviourPage();
    },
    changegroupPageSize(pageSize){
        this.pageNum = 1,
        this.pageSize = pageSize;
        this.Fetchsalesrule();
    },

    goElevatorPage(pageId){
      var evtObj;
      var thisPage=document.getElementById(pageId);
      var elevatorDiv=thisPage.getElementsByClassName("ivu-page-options-elevator");
      if(elevatorDiv && elevatorDiv.length>0){
        var pageInput = elevatorDiv[0].getElementsByTagName("input")[0];
        if (window.KeyEvent) {
          evtObj = document.createEvent('KeyEvents');
          evtObj.initKeyEvent("keyup", true, true, window, true, false, false, false, 13, 0);
        } else {
          evtObj = document.createEvent('UIEvents');
          evtObj.initUIEvent("keyup", true, true, window, 1);
          delete evtObj.keyCode;
          if (typeof evtObj.keyCode === "undefined") {
            Object.defineProperty(evtObj, "keyCode", { value: 13 });
          } else {
            evtObj.key = String.fromCharCode(13);
          }
        }
        pageInput.dispatchEvent(evtObj);
      }
    },

    //互动积分规则列表
    pointsRuleBehaviourPage(){
        this.TableLoading = true;
        var reqParams = {
          behaviourTypeId: new Number(this.formItem.behaviourTypeId),
          pageSize: this.pageSize,
          pageNum: this.pageNum
        };
      pointsRuleBehaviourPage(reqParams).then((res)=>{
          this.TableLoading = false;
          if(res.data.code == 200){
            this.data6 = res.data.result.records;
            this.pageNum = res.data.result.current;
            this.pageSize = res.data.result.size;
            this.total = res.data.result.total;
          }
        }).catch((error)=>{
            this.TableLoading = false;
            this.$Message.error("查询失败!");
      })
        
      },

    Addintegralrule(){
        if (this.formItem.name == "") {
            this.$Message.error("请输入积分规则名称!");
            return;
        }
        if (this.formItem.limitDescription == "") {
            this.$Message.error("请输入规则描述!");
            return;
        }
        if (this.formItem.points == "") {
            this.$Message.error("请输入获取积分数量!");
            return;
        }
        if (this.formItem.channel_id == "") {
            this.$Message.error("请选择渠道!");
            return;
        }
        if (this.formItem.beginDate == "") {
            this.$Message.error("请选择开始时间!");
            return;
        }
        if (this.formItem.endDate == "") {
            this.$Message.error("请选择结束时间!");
            return;
        }
        if (this.formItem.beginDate > this.formItem.endDate) {
            this.$Message.error("开始时间不能晚于结束时间,请重新选择!");
            return;
        }
        if (this.formItem.limitPeriodType == "") {
            this.$Message.error("请选择周期时间!");
            return;
        }
        if (this.formItem.uplimitTimes == "") {
            this.$Message.error("请输入限制次数!");
            return;
        }
        if (this.formItem.uplimitPoints == "") {
            this.$Message.error("请输入获得的积分上限!");
            return;
        }
        var reqParams = this.formItem;
        reqParams.behaviourTypeId = this.formItem.behaviourTypeId;
        addintegralrule(reqParams).then((res)=>{
            if(res.data.code == 200 ){
                this.$Message.success('添加成功!');
                this.modal1 = false;
                this.pointsRuleBehaviourPage();
            }
        }).catch((error)=>{
            this.$Message.error("修改失败!");
      })    
    },

    getPointsTypeList(){
      pointsTypeList().then((res)=>{
        if(res.data.code == 200){
          this.pointsTypeList = res.data.data;
        }
      }).catch((error)=>{
        this.TableLoading = false;
        this.$Message.error("查询失败!");
      })
    },
    FetchChannelList(){
       fetchChannelList().then((res)=>{
           if(res.data.code == 200){
            this.channellist = res.data.data;
           }
       }).catch((error)=>{
            this.TableLoading = false;
            this.$Message.error("查询失败!");
       })   
    },
    showrule(index){
        this.modal2 = true;
        this.ruledetail = this.data6[index];
        this.ruledetail.channelId  = this.data6[index].channel_id;
        this.ruledetail.limitPeriodType = this.data6[index].limit_period_type;
    },
    showintegralrule(){
        this.modal2 = false;
    },

    /** 修改积分规则 */
    editrule(index){
        this.modal3 = true;
        this.ruledetail = this.data6[index];
        this.ruledetail.id = this.data6[index].id;
        this.ruledetail.name = this.ruledetail.name,
        this.ruledetail.limitDescription = this.ruledetail.limit_description;
        this.ruledetail.points = this.ruledetail.points;
        this.ruledetail.channelId = this.ruledetail.channelId;
        this.ruledetail.beginDate = this.ruledetail.begin_date;
        this.ruledetail.endDate = this.ruledetail.end_date;
        this.ruledetail.limitPeriodType = this.ruledetail.limit_period_type;
        this.ruledetail.uplimitTimes = this.ruledetail.uplimit_times;
        this.ruledetail.uplimitPoints = this.ruledetail.uplimit_points;
    },
    Editintegralrule(){
        if (this.ruledetail.begin_date > this.ruledetail.end_date) {
            this.$Message.error("开始时间不能晚于结束时间,请重新选择!");
            return;
        }
        if (this.ruledetail.name == "") {
            this.$Message.error("请输入积分规则名称!");
            return;
        }
        if (this.ruledetail.limitDescription == "") {
            this.$Message.error("请输入规则描述!");
            return;
        }
        if (this.ruledetail.points == "") {
            this.$Message.error("请输入获取积分数量!");
            return;
        }
        if (this.ruledetail.channel_id == "") {
            this.$Message.error("请选择渠道!");
            return;
        }
        if (this.ruledetail.beginDate == "") {
            this.$Message.error("请选择开始时间!");
            return;
        }
        if (this.ruledetail.endDate == "") {
            this.$Message.error("请选择结束时间!");
            return;
        }
        if (this.ruledetail.beginDate > this.ruledetail.endDate) {
            this.$Message.error("开始时间不能晚于结束时间,请重新选择!");
            return;
        }
        if (this.ruledetail.limitPeriodType == "") {
            this.$Message.error("请选择周期时间!");
            return;
        }
        if (this.ruledetail.uplimitTimes == "") {
            this.$Message.error("请输入限制次数!");
            return;
        }
        if (this.ruledetail.uplimitPoints == "") {
            this.$Message.error("请输入获得的积分上限!");
            return;
        }
        var reqParams = {
            id: this.ruledetail.id,
            name: this.ruledetail.name,
            limitDescription: this.ruledetail.limitDescription,
            points: this.ruledetail.points,
            channelId: this.ruledetail.channelId,
            beginDate: this.ruledetail.beginDate,
            endDate: this.ruledetail.endDate,
            limitPeriodType: this.ruledetail.limitPeriodType,
            uplimitTimes: this.ruledetail.uplimitTimes,
            uplimitPoints: this.ruledetail.uplimitPoints, 
        };
        editintegralrule(reqParams).then((res)=>{
            if(res.data.code == 200){
                this.$Message.success('修改成功！');
                this.pointsRuleBehaviourPage();
                this.modal3 = false;
            }
        }).catch((error)=>{
            this.TableLoading = false;
            this.$Message.error("修改失败!");
      })
           
    },

    /** 删除积分规则 */
    remove(params) {
      var my = this;
      this.$Modal.confirm({
        title: "删除确认",
        content: `是否确认删除该积分规则`,
        onOk: function() {
          var reqParams = {
            id: params.id
          };
          delintegralrule(reqParams).then((res) => {
            if (res.data.code == 200) {
              this.$Message.success("删除成功！")
              my.pointsRuleBehaviourPage();
            }
          })
          .catch((error)=>{
              this.$Message.error("删除失败："+error);
          })
        }
      });
    },
    changeDate(value) {
      var dateee = new Date(value).toJSON();
      var date = new Date(+new Date(dateee)+8*3600*1000).toISOString().replace(/T/g,' ').replace(/\.[\d]{3}Z/,'');
      return date;
    },
  },
  mounted () {
    this.FetchChannelList();
    this.getPointsTypeList();
    this.pointsRuleBehaviourPage();
  }
}
</script>
<style lang="scss" scoped>
@import "../../styles/common";
.editIntegral_container{
  background-color: #fff;
  .nav {
    font-size: 1.1rem;
    line-height: 30px;
    padding: 0px 0px 0px 10px;
  }
}
</style>
